<template>
	<!-- #ifdef APP-PLUS -->
		<view class="flex align-center py-4" style="padding-left: 90rpx;padding-right: 90rpx;">
			<view class="flex-1 flex justify-center align-center" v-for="(item,index) in providerList"
			@click="login(item)">
				<view
					:class="item.icon + ' ' +item.bgColor"
					class="flex justify-center align-center text-white iconfont font-lg rounded-circle"
					style="width: 100rpx;height: 100rpx;">
				</view>
			</view>
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<button type="primary" style="width: 80%; margin-bottom: 20px;" open-type="getUserInfo" @getuserinfo="mpGetUserInfo">微信登录</button>
	<!-- #endif -->
	</view>
</template>

<script>
	export default{
		props:{
			back:{
				type:Boolean,
				default:false
			}
		},
		data(){
			return{
				providerList: [],
			}
		},
		mounted() {
			uni.getProvider({
				service: 'oauth',
				success: (result) => {
					this.providerList = result.provider.map((value) => {
						let providerName = '';
						let icon ='';
						let bgColor = ''
						switch (value) {
							case 'weixin':
								providerName = '微信登录',
								icon = 'icon-weixin',
								bgColor = 'bg-success'
								break;
							case 'qq':
								providerName = 'QQ登录',
								icon = 'icon-QQ',
								bgColor = 'bg-primary'
								break;
							case 'sinaweibo':
								providerName = '新浪微博登录',
								icon = 'icon-xinlangweibo',
								bgColor = 'bg-warning'
								break;
						}
						return {
							name: providerName,
							id: value,
							icon:icon,
							bgColor:bgColor
						}
					});
				},
				fail: (error) => {
					console.log('获取登录通道失败', error);
				}
			});
		},
		methods:{
			// #ifdef MP-WEIXIN
				// mpGetUserInfo(result){
				// 	console.log(result)
				// 	uni.showLoading({ title: '登录中...', mask: true });
				// 	if(result.detail.errMsg !== 'getUserInfo:ok'){
				// 		uni.hideLoading()
				// 		uni.showModal({
				// 			title: '获取用户信息失败',
				// 			content: '错误原因' + result.detail.errMsg,
				// 			showCancel: false
				// 		})
				// 		return
				// 	}
				// 	//获取成功 拿到userinfo
				// 	let userinfo =result.detail.userInfo
				// 	uni.login({
				// 		provider:"weixin",
				// 		success: (res) => {
				// 			console.log(res)
				// 			this.$H.post('/wxlogin',{
				// 				code:res.code,
				// 				nickName:userinfo.nickName,
				// 				avatarUrl:userinfo.avatarUrl
				// 			},{nactive:true}).then(res => {
				// 				console.log(res)
				// 			})
							
				// 			uni.hideLoading()
				// 		}
				// 	})
				// },
			// #endif
			// #ifdef MP-WEIXIN
			mpGetUserInfo(result) {
				uni.showLoading({ title: '登录中...', mask: true });
				// 获取失败
				if (result.detail.errMsg !== 'getUserInfo:ok') {
					uni.hideLoading();
					uni.showModal({
						title: '获取用户信息失败',
						content: '错误原因' + result.detail.errMsg,
						showCancel: false
					});
					return;
				}
				let userinfo = result.detail.userInfo;
				uni.login({
					provider:"weixin",
					success: (res) => {
						this.MpLogin({
							url:"/wxlogin",
							code:res.code,
							nickName:userinfo.nickName,
							avatarUrl:userinfo.avatarUrl
						})
					},
					complete: () => {
						uni.hideLoading();
					}
				})
			},
			// #endif
			MpLogin(options){
				this.$H.post(options.url,{
					code:options.code,
					nickName:options.nickName,
					avatarUrl:options.avatarUrl
				},{nactive:true}).then(data=>{
					// 修改vuex的state,持久化存储
					console.log(data)
					this.$store.commit('login',this.$U.formatUserinfo(data))
					this.$store.dispatch('openSocket')
					// 返回上一页
					if(this.back){
						uni.navigateBack({
							delta: 1
						});
					}
					uni.showToast({
						title: '登录成功',
						icon: 'none'
					});
				});
			},
			login(item){
				uni.login({
				  provider: item.id,
				  success: (res) =>{
					uni.getUserInfo({
					      provider: item.id,
					      success: (infoRes) => {
							let obj = {
								provider:item.id,
								openid:infoRes.userInfo.openId,
								expires_in:res.authResult.expires_in,
								nickName:infoRes.userInfo.nickName,
								avatarUrl:infoRes.userInfo.avatarUrl
							}
							this.loginEvent(obj)
					      }
					    });
				  },
				  fail: () => {
				  	uni.showToast({
				  		title: '登录失败',
				  		icon: 'none'
				  	});
				  }
				});
			},
			//三方登录事件
			loginEvent(data){
				this.$H.post('/user/otherlogin',data).then(res => {
					let user = this.$U.formatUserinfo(res)
					this.$store.commit('login',user)
					if(this.back){
						uni.navigateBack({
							delta: 1
						});
					}
					uni.showToast({
						title: '登录成功',
						icon:'none'
					});
				})
			}
		}
	}
</script>

<style>
</style>
